<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 引入js-->
		<script src="../js/pixi.min.js"> </script>
		
		<!-- 说明脚本语音-->
		<script type="text/javascript">
			//创建游戏应用窗口
			
			var app=new PIXI.Application(500,600);/*PIXI是引入的js里的元素*/
			//将当应用田间到游戏页面中
			document.body.appendChild(app.view);//app.view 创建的app对象。view窗口添加到网页里
			
			//添加图片元素
			/*
			 * new：创建
			 * new PIXI.Sprite.fromImage 创建图片元素
			 *  sprite si bu tui te
			 *  ##先写语句体再写要复制给谁 中间可以想一想##
			 */
			var plane= new PIXI.Sprite.fromImage("img/img/bg1.png");
			//添加到游戏窗口
			
			
			app.stage.addChild(plane);//给app的应用窗口内部(stage/si dei ji)添加一个元素(addchild)
			//新建文本元素
			var wenz= new PIXI.Text("戴夫の家");
			wenz.style.fill="#9b59b6";
			/*style：风格 fill：填充颜色
			 * 文本元素默认是黑色s
			 */
			
			//修改元素在窗口上的位置
			wenz.x=200;
			wenz.y=30;
			//将文本添加到页面上
			app.stage.addChild(wenz);
			var ery=new PIXI.Sprite.fromImage("img/img/js2.png");
			ery.x=120;
			ery.y=300;
			app.stage.addChild(ery);
			/*
			x、y调整水平垂直坐标
			width、height 宽高
			rotation 旋转
			scale （sh da lai ）:缩小放大比例 缩小0~1 放大1~n 
					sclae.x宽度 -1水平反转
					sclae.y高度 同理
			visible:是否可见 true false
			alpha:透明度 0~1
			
			文本属性
			text:修改文本内容
			style:文本样式 
					fill=设置字体颜色
					fontSize=字体大小
					fontweight 加粗
					fontFamily：字体
					
			*/ 
		   /*
		   function add(src,x,y){
		   	var yuans=new PIXI.Sprite.fromImage(src);
		   	yuans.x=x;
		   	yuans.y=y;
		   	app.stage.addChild(yuans);
		   }
		   方法
		   */ 
		  //事件处理
		  /*
		  click 单击元素时
		  mousedown 在元素中按下鼠标时
		  mouseup 在元素中松开鼠标时
		  mouseover 当鼠标进入元素时
		  mouseout 当鼠标离开元素时
		  mousemove 鼠标移动时
			1、对元素进行监听
			元素名.interactive = true;
			2、监听某种事件，当用户触发该事件时执行函数
			元素名.on("事件名称" , 负责处理事件的函数名);
			3、定义负责处理事件的函数
			function 函数名(){
				
			}
		  */ 
		  function add(src,x,y){
		  	var yuans=new PIXI.Sprite.fromImage(src);
		  	yuans.x=x;
		  	yuans.y=y;
		  	app.stage.addChild(yuans);
			
			return yuans;
		  }
		  function moveup()
		  {
			  ery.y+=10;
		  }
			function movedown(){
				ery.y-=10;
			}
		  
		  
		  //元素组合
		  //将独立的多个元素合并到一起，视为一个整体，便于程序对多个元素的统一处理
			//在程序中可以将一个元素添加到另外一个中，合并为一个整体
			/*
			注意：辅元素添加到主元素中时，辅元素的默认起始位置等于主元素的锚点
			当为辅元素设置位置时（x,y），x与y表示的是辅元素与主元素之间的距离
			如下图所示
			*/
		   //图片图层
		   /*
		   图片图层：图片在应用窗口的层级
		   默认图层效果：先插入的元素低于后插入的元素（后插入的元素会遮盖先插入的元素）
		   合并元素图层效果：辅元素会与主元素图层一致并将主元素向下压一级（辅元素会遮盖主元素）
		   原来遮盖主元素的其他元素，现在将同时遮盖主元素与辅元素
		   */ 
		  function add2 (src,x,y,zhu) {
		  	var yuans=new PIXI.Sprite.fromImage("img/plane_blue_01.png");
		  	yuans.x=x;
		  	yuans.y=y;
		  	yuans.anchor.set(0.5,0.5);
		  	zhu.addChild(yuans);
		  	//将新建的元素添加到现有的元素中就行
		  	
		  }
		  var ery= add("img/img/js4.png",250,200);
		  var up =add("img/img/jumpBtn.png",360,400);
		  var down=add("img/img/dunBtn.png",0,400);
		  add2("img/img/js1.png",100,100,ery);
		  up.interactive=true;
		  down.interactive=true;
		  
		  up.on("click", moveup );
		  down.on("click", movedown);
		   
		  
		  
		</script>
	</body>
</html>